<template>
	<view class="index-content">
		<swiper-tab-header :tabBar="tabBar" :tabIndex="tabIndex" @tabtap="tabtap"></swiper-tab-header>
		<view class="uni-tab-bar tab">
			<swiper 
			:current="tabIndex" 
			class="swiper-box" 
			:style="{height: swiperHeight + 'px'}"
			@change="tabChange">
				<swiper-item v-for="(items, index1) in newslist" :key="index1">
					<scroll-view scroll-y="true" class="list" @scrolltolower="loadmore(index1)">
						<view class="user-list" v-if="items.list.length > 0">
							<!-- 图文列表 -->
							<block v-for="(item, index) in items.list" :key="index">
								<index-list :item="item" :index="index"></index-list>
							</block>
							<!-- 上拉刷新 -->
							<load-more :loadtext="items.loadtext"></load-more>
						</view>
						<!-- 无内容默认 -->
						<no-thing :nothing="!items.list.length > 0"></no-thing>
					</scroll-view>
				</swiper-item>
			</swiper>
		</view>
		
	</view>
</template>

<script>
	import indexList from '../../components/index/index-list.vue';
	import swiperTabHeader from '../../components/index/swiper-tab-header.vue';
	import loadMore from '../../components/common/load-more.vue';
	import noThing from '../../components/index/no-thing.vue';
	export default {
		data() {
			return {
				tabIndex: 0,
				swiperHeight: 0,
				tabBar:[
					{
						name: "关注",
						id: 'guanzhu'
					},
					{
						name: '推荐',
						id: 'tuijian'
					},
					{
						name: '体育',
						id: 'tiyu'
					},
					{
						name: '热点',
						id:'redian'
					},
					{
						name: '财经',
						id: 'caijing'
					},
					{
						name:'娱乐',
						id: 'yule'
					}
				],
				newslist:[
					{
						loadtext:'上拉加载更多',
						list: [
							{
								userpic: "../../static/demo/userpic/12.jpg",
								username: "昵称",
								isguanzhu: false,
								title: "我是标题",
								type: "img",// img: 图文， video：视频
								titlepic:"../../static/demo/datapic/11.jpg",
								morepic: ['../../static/demo/datapic/11.jpg', '../../static/demo/datapic/12.jpg', '../../static/demo/datapic/13.jpg'],
								infonum: {
									state: 0, // 没有操作， 1、：顶， 2、：踩
									dingnum: 11,
									cainum: 11,	
								},
								commentnum: 20,
								sharenum: 10 
							},
							{
								userpic: "../../static/demo/userpic/12.jpg",
								username: "昵称",
								isguanzhu: true,
								title: "我是标题",
								type: "video",// img: 图文， video：视频
								titlepic:"../../static/demo/datapic/11.jpg",
								morepic: ['../../static/demo/datapic/11.jpg', '../../static/demo/datapic/12.jpg', '../../static/demo/datapic/13.jpg'],
								playnum:"20w",
								long: "2:47",
								infonum: {
									state: 1, // 没有操作， 1、：顶， 2、：踩
									dingnum: 11,
									cainum: 11,	
								},
								commentnum: 20,
								sharenum: 10 
							},
						]
					},
					{
						loadtext:'上拉加载更多',
						list: [
							{
								userpic: "../../static/demo/userpic/12.jpg",
								username: "昵称",
								isguanzhu: false,
								title: "我是标题",
								type: "img",// img: 图文， video：视频
								titlepic:"../../static/demo/datapic/11.jpg",
								morepic: ['../../static/demo/datapic/11.jpg', '../../static/demo/datapic/12.jpg', '../../static/demo/datapic/13.jpg'],
								infonum: {
									state: 0, // 没有操作， 1、：顶， 2、：踩
									dingnum: 11,
									cainum: 11,	
								},
								commentnum: 20,
								sharenum: 10 
							},
							{
								userpic: "../../static/demo/userpic/12.jpg",
								username: "昵称",
								isguanzhu: true,
								title: "我是标题",
								type: "video",// img: 图文， video：视频
								titlepic:"../../static/demo/datapic/11.jpg",
								playnum:"20w",
								long: "2:47",
								infonum: {
									state: 1, // 没有操作， 1、：顶， 2、：踩
									dingnum: 11,
									cainum: 11,	
								},
								commentnum: 20,
								sharenum: 10 
							},
						]
					},
					{
						loadtext:'上拉加载更多',
						list: [
							{
								userpic: "../../static/demo/userpic/12.jpg",
								username: "昵称",
								isguanzhu: false,
								title: "我是标题",
								type: "img",// img: 图文， video：视频
								titlepic:"../../static/demo/datapic/11.jpg",
								morepic: ['../../static/demo/datapic/11.jpg', '../../static/demo/datapic/12.jpg', '../../static/demo/datapic/13.jpg'],
								infonum: {
									state: 0, // 没有操作， 1、：顶， 2、：踩
									dingnum: 11,
									cainum: 11,	
								},
								commentnum: 20,
								sharenum: 10 
							},
							{
								userpic: "../../static/demo/userpic/12.jpg",
								username: "昵称",
								isguanzhu: true,
								title: "我是标题",
								type: "video",// img: 图文， video：视频
								titlepic:"../../static/demo/datapic/11.jpg",
								playnum:"20w",
								long: "2:47",
								infonum: {
									state: 1, // 没有操作， 1、：顶， 2、：踩
									dingnum: 11,
									cainum: 11,	
								},
								commentnum: 20,
								sharenum: 10 
							},
						]
					},
					{
						loadtext:'上拉加载更多',
						list: [
							{
								userpic: "../../static/demo/userpic/12.jpg",
								username: "昵称",
								isguanzhu: false,
								title: "我是标题",
								type: "img",// img: 图文， video：视频
								titlepic:"../../static/demo/datapic/11.jpg",
								infonum: {
									state: 0, // 没有操作， 1、：顶， 2、：踩
									dingnum: 11,
									cainum: 11,	
								},
								commentnum: 20,
								sharenum: 10 
							},
							{
								userpic: "../../static/demo/userpic/12.jpg",
								username: "昵称",
								isguanzhu: true,
								title: "我是标题",
								type: "video",// img: 图文， video：视频
								titlepic:"../../static/demo/datapic/11.jpg",
								playnum:"20w",
								long: "2:47",
								infonum: {
									state: 1, // 没有操作， 1、：顶， 2、：踩
									dingnum: 11,
									cainum: 11,	
								},
								commentnum: 20,
								sharenum: 10 
							},
						]
					},
					{
						loadtext:'上拉加载更多',
						list: []
					},
					{
						loadtext:'上拉加载更多',
						list: []
					},
				]
				
			}
		},
		onLoad() {
			uni.getSystemInfo({
				success: (res) => {
					this.swiperHeight = res.screenHeight - uni.upx2px(288)
				}
			})
		},
		// 监听导航搜索框点击事件
		onNavigationBarSearchInputClicked(){
			uni.navigateTo({
				url:'../search/search',
				animationType:"slide-in-right",
			})
		},
		// 监听导航标题按钮点击事件
		onNavigationBarButtonTap(ev) {
			switch(ev.index){
				case 1:
					uni.navigateTo({
						url:"../add-input/add-input",
						animationType:"slide-in-top"
					})
					break;
			}
		},
		methods: {
			// tap点击事件
			tabtap(index){
				this.tabIndex = index
			},
			// 滑动事件
			tabChange(ev){
				this.tabIndex = ev.detail.current
			},
			loadmore(index){
				this.newslist[index].loadtext = "上拉加载更多";
				if(this.newslist[index].loadtext != "上拉加载更多"){
					return;
				}
				this.newslist[index].loadtext = "加载中...";
				uni.showLoading({
					title:"加载中...",
					mask:true,
					success: () => {
						let obj = {
							userpic: "../../static/demo/userpic/12.jpg",
							username: "昵称",
							isguanzhu: true,
							title: "我是标题",
							type: "video",// img: 图文， video：视频
							titlepic:"../../static/demo/datapic/11.jpg",
							playnum:"20w",
							long: "2:47",
							infonum: {
								state: 1, // 没有操作， 1、：顶， 2、：踩
								dingnum: 11,
								cainum: 11,	
							},
							commentnum: 20,
							sharenum: 10 
						};
						setTimeout(() => {
							this.newslist[index].list.push(obj)
							uni.hideLoading()
							this.newslist[index].loadtext = "上拉加载更多"
						}, 1000);
					}
				})
			}
		},
		components:{
			indexList,
			swiperTabHeader,
			loadMore,
			noThing
		}
	}
</script>

<style scoped lang="scss">
	body{
		position: relative;
	}
	.index-content {
		width:100%;
		.tab{
			padding-top: 100upx;
			box-sizing: border-box;
		}
		.user-list{
			width: 100%;
			height: auto;
			box-sizing: border-box;
			padding: 20upx;
		}
	}
</style>
